<template>
  <div>
    <div>{{$t('menus.Home') }}</div>
    <div>当前语言:{{langName}}</div>
    <div><button @click="setLang('ch')">中文</button><button @click="setLang('en')">English</button></div>
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'
import {onMounted,ref} from 'vue'

export default {
  name: "HomePage",

  setup() {
    //得到i18n的locale
    const {locale } = useI18n();
    
    //显示当前语言的名字
    const getLangName = (lang) => {
      if (lang == 'ch') {
        return '中文';
      } else if (lang == 'en') {
        return 'English';
      }
    }
    const  langName = ref('');

    //默认的语言
    onMounted(()=>{
      langName.value = getLangName(locale.value);
    });

    //指定语言
    const setLang = (lang) => {
      locale.value = lang
      localStorage.setItem('lang', lang)
      langName.value = getLangName(locale.value);
    }

    return {
      langName,
      setLang,
    }
  }

}
</script>

<style scoped>

</style>
